<!-- 人气 -->
<template>
  <view class="popularity">
    <view
      class="container"
      :style="{
        width: width + 'rpx',
        height: height + 'rpx',
        backgroundColor: preHeight < height ? bgColor : 'none'
      }"
    >
      <view
        class="processA"
        :style="{
          'border-radius': this.circle ? this.height + 'rpx' : 0,
          width: teamAWidth,
          height: preHeight + 'rpx'
        }"
      ></view>
      <view
        class="processB"
        :style="{
          'border-radius': this.circle ? this.height + 'rpx' : 0,
          width: teamBWidth,
          height: preHeight + 'rpx'
        }"
      ></view>
      <image
        class="popularityHot"
        :src="IMAGES.VIDEO_HOT"
        :style="{
          left: iconWidth
        }"
      ></image>
    </view>
  </view>
</template>

<script>
import { IMAGES } from "@/config/resources";
export default {
  computed: {
    IMAGES: () => IMAGES,
    teamAWidth() {
      if (!this.teamAPeoples && !this.teamBPeoples) {
        return this.width / 2 + "rpx";
      } else {
        return (this.teamAPeoples / (this.teamAPeoples + this.teamBPeoples)) * this.width + "rpx";
      }
    },
    teamBWidth() {
      if (!this.teamAPeoples && !this.teamBPeoples) {
        return this.width / 2 + "rpx";
      } else {
        return (this.teamBPeoples / (this.teamAPeoples + this.teamBPeoples)) * this.width + "rpx";
      }
    },
    iconWidth() {
      if (!this.teamAPeoples && !this.teamBPeoples) {
        return this.width / 2 - 10.5 + "rpx";
      } else {
        return (this.teamAPeoples / (this.teamAPeoples + this.teamBPeoples)) * this.width - 10.5 + "rpx";
      }
    }
  },
  props: {
    width: {
      type: Number,
      validate(value) {
        return value <= 750;
      },
      default: 750
    },
    height: {
      type: Number,
      default: 25
    },
    // 前景高度
    preHeight: {
      type: Number,
      default: 15
    },
    // 背景色
    bgColor: {
      type: String,
      default: "#000000"
    },
    // 前景是否圆角
    circle: {
      type: Boolean,
      default: false
    },
    teamAPeoples: {
      type: Number,
      default: 0
    },
    teamBPeoples: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="scss">
.popularity {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
}
.processA {
  position: absolute;
  background-color: #fec108;
  bottom: 0;
  left: 0;
}
.processB {
  position: absolute;
  background-color: #7b7b7b;
  bottom: 0;
  right: 0;
}
.popularityHot {
  width: 21upx;
  height: 21upx;
  position: absolute;
  bottom: 0upx;
  right: 0;
  z-index: 1;
}
</style>
